<template>
  <div class="section section-base section-join">
    <div class="font24 colorYellow text-l" id="page_2_platName">{{reportData.orgName}}</div>
    <div class="page_2_content text-l">
      <p class="font20">已加入智慧消防</p>
      <div class="page_2_flex" style="justify-content: flex-start;">
        <count-to class="font40" :startVal="0" :endVal="continueTime" :duration="3000"></count-to>
        <span id="company_1" class="font16">小时</span>
      </div>
      <p class="font16 opacityColor" id="page_2_timeDay">共计{{reportData.joinTime.continueDay}}天</p>
      <p class="font20">{{new Date(reportData.startDate).getFullYear()}}年我们为您积累了</p>
      <div class="page_2_flex">
        <count-to class="font40" :startVal="0" :endVal="dataCount" :duration="3000"></count-to>
        <span class="font16">数据</span>
      </div>
      <img src="/ilink-app-h5-zd/static/img/ilink_1578383633430.png" class="page_2_contentBg" />
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    reportData: {
      type: Object,
      default: function () {
        return {
          joinTime: {},
        }
      },
    },
    active: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dataCount: 0,
      continueTime: 0,
    }
  },
  watch: {
    active(val) {
      if (val) {
        this.$nextTick(() => {
          this.dataCount = this.reportData.joinTime.dataCount || 0
          this.continueTime = this.reportData.joinTime.continueTime || 0
        })
      }
    },
  },
  methods: {},
  mounted() {},
}
</script>